<template>
  <view class="container">
    <view class="address-list">
      <view class="a-address" v-for="(item,index) in addressList" :key="index">
        <view class="left-text" :class="item.id===selectedAddress.id? 'active':''" @longtap="selectTap(item)"
              @click="selectOne(item)">
          <view class="name-tel">
            {{ item.consignee }} {{ item.phone }}
            <label class="name-label">{{ item.label }}</label>
            <label v-show="item.isDefault===1" class="name-label1">默认</label>
          </view>
          <view class="address-box1">
            {{ item.detail }}
          </view>
          <view class="address-box">
            {{
              item.provinceName +
              item.cityName +
              item.districtName
            }}
          </view>
        </view>
        <view class="right-edit" @tap="editAddess(item)"></view>
      </view>
    </view>
    <view class="bottom-box">
      <view class="add-btn" @tap="addAddess">新增收货地址</view>
    </view>

  </view>
</template>

<script>
import {deleteAddressApi, getUserAddressApi} from "@/network/api";
import {getAddress, setAddress, setToken} from "@/common/auth";

export default {
  data() {
    return {
      addressList: [{
        provinceName: "江苏省",
        cityName: "苏州市",
        districtName: "虎丘区",
        detail: "江苏科技大学石湖校区",
        consignee: "zr",
        id: 1762094874259112000,
        isDefault: 0,
        label: "学校",
        phone: "19852742330",
        sex: 0,
        userId: 1750554181879562200
      }
      ],
      islongPress: false,
      selectedAddress: {}
    }
  },
  onLoad() {
    this.getUserAddress()
    this.selectedAddress=getAddress()
  },
  methods: {
    selectOne(item) {
      setAddress(item)
      this.selectedAddress=getAddress()
      console.log(this.selectedAddress)
    },
    selectTap(item) {
      const _this = this
      console.log("tap item item:" + JSON.stringify(item));
      uni.showModal({
        title: '确认',
        content: '确认要删除该项吗？',
        success: function (res) {
          if (res.confirm) {
            console.log('点击了确认')
            deleteAddressApi(item.id).then(res => {
              _this.getUserAddress()
            })
          } else {
            console.log('点击了取消')
          }
        }
      })

    },
    editAddess(item) {
      console.log("edit item id:" + item);
      uni.navigateTo({
        url: '/pages/addressDetail/addressDetail?item=' + JSON.stringify(item)
      })
    },
    addAddess() {
      console.log("tap add new Address");
      this.editAddess(null)
    },
    getUserAddress: function () {
      const _this = this
      getUserAddressApi().then(res => {
        _this.addressList = res.data
      })
    }
  }
}
</script>

<style>
.container {
  background-color: #F2f2f2;
}

.address-list {
  width: 100%;
  background-color: #fff;
  margin-top: 20upx;
  padding-bottom: 100upx;
}

.address-list .a-address {
  width: 720upx;
  margin-left: 30upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30upx 0;
  border-bottom: 1upx solid #eee;
}

.a-address .left-text {
  width: 610upx;
  box-sizing: border-box;
  padding-left: 58upx;
}

.a-address .left-text.active {
  background: url() no-repeat left center;
  background-size: 28upx auto;
}

.a-address .left-text .name-tel {
  margin-bottom: 20upx;
}

.name-label {
  font-size: 16upx;
  margin-left: 20rpx;
  padding: 5rpx;
  background-color: #619aea;
  color: white;
  border-radius: 15rpx;
}

.name-label1 {
  font-size: 16upx;
  margin-left: 20rpx;
  padding: 5rpx;
  background-color: #FB766A;
  color: white;
  border-radius: 15rpx;
}

.a-address .left-text .address-box {
  font-size: 24upx;
  color: #888888;
  line-height: 36upx;
}


.address-box1 {
  font-size: 30upx;
  line-height: 36upx;
  margin-bottom: 16rpx;
}


.a-address .right-edit {
  width: 109upx;
  height: 100%;
  padding: 50upx 0 50upx 58upx;
  box-sizing: border-box;
  background: url() no-repeat 43upx center;
  background-size: 35upx auto;
}

.bottom-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  font-size: 28upx;
  color: #000000;
  border-top: 1upx solid #eee;
  height: 100upx;
  line-height: 100upx;
  background: #fff url() no-repeat 705upx center;
  background-size: 15upx auto;
}

.bottom-box .add-btn {
  margin-left: 30upx;
  padding-left: 70upx;
  background: url() no-repeat left center;
  background-size: 40upx auto;
}
</style>
